<script setup>
    import CartCard from '@/components/cart/CartCard.vue'
    import {computed, ref} from 'vue'
    import { useRoute,useRouter } from 'vue-router'
    import {useCartStore} from '@/stores/cart.js';
    import {useOrderStore} from '@/stores/order.js';
    import {useNewOrderStore} from '@/stores/newOrder.js';


    const props = defineProps(['shopName'])
    const cart = useCartStore()
    const order = useOrderStore()
    const newOrder = useNewOrderStore()
    const newRouter = useRouter()
    const router = useRoute()
    let jud = ref(false)
    let isShow = ref(false)
    const orderOne = ref([])

    // 获取符合的购物车
    const newCart = computed(()=>{
        if (cart.cartList.length !== 0) {
            if (router.query.shopName) {
                return cart.cartList.find(ele => ele.name === router.query.shopName)
            }else if (props.shopName) {
                return cart.cartList.find(ele => ele.name === props.shopName)
            }
        }
    })
    
    // 获取符合的购物车的商品
    const newCartList = computed(()=>{
        if (newCart.value) {
            return newCart.value.list.filter(ele => ele.checked === true)
        }else{
            return []
        }
    })


    // 获取购物车的商品总价
    const newCartPrice = computed(()=>{
        if (newCart.value) {
            return newCartList.value.reduce((sum,item)=>{return sum+item.price*item.number},0)
        }else{
            return 0
        }
    })

    // 获取地址列表
    orderOne.value = computed(()=>{
        if (order.orderList.length !== 0 && router.query.newId) {
            jud.value = true
            order.orderList.forEach(element => {
                element.exp = false
            });
            order.orderList[router.query.newId].exp = true
            return order.orderList.find(ele =>{return ele.exp === true})
        }


        if (order.orderList.length !== 0) {
            jud.value = true
            let expJud = order.orderList.some(ele =>{return ele.exp === true})
            if (!expJud) {
                order.orderList[0].exp = true
            }
            return order.orderList.find(ele =>{return ele.exp === true}) || order.orderList[0]
        }
    }).value


    // 返回操作
    const clickBut = ()=>{
        if (router.query.address === '/cart') {
            newRouter.push({
                path:router.query.address
            })
        }else{
            newRouter.push({
                path:'/shopView',
                query:{
                    id:router.query.address
                }
            })
        }
    }

    // 提交订单
    const clickOrder = ()=>{
        isShow.value = !isShow.value
        if (!orderOne.value) {
            // alert('请选择地址')
            newRouter.push({
                path:'/address',
                query:{
                    address:router.query.address,
                    shopName:router.query.shopName
                }
            })
        }
        
    }

    // 选择地址
    const clickAdd = ()=>{
        newRouter.push({
                path:'/address',
                query:{
                    address:router.query.address,
                    shopName:router.query.shopName
                }
            })
    }

    // 确认支付
    const clickPay = ()=>{
        let orderJud = newOrder.newOrderList.find(ele => ele.name === newCart.value.name)

        if (!orderJud) {
            newOrder.newOrderList.push({...newCart.value})
        }else{
            newCartList.value.forEach(element => {
                let newJud = orderJud.list.find(ele => ele.id === element.id)
                if (newJud) {
                    newJud.number += element.number
                }else{
                    orderJud.list.push({...element})
                }
            });
        }
        

        newRouter.push({
                path:'/order'
            })

        console.log('order',newOrder.newOrderList);
        console.log('cart',cart.cartList);
    }
</script>

<template>
    <div class="order_confirmation">
        <div class="order_confirmation_header">
            <div class="order_confirmation_header_title">
                <span class="iconfont title_back" @click="clickBut">&#xe697;</span>
                <div class="title_text">确定订单</div>
            </div>
            <div class="order_confirmation_header_address">
                <div class="address_title">收货地址</div>
                <div class="current_address" @click="clickAdd">
                    <div class="current_address_info" v-if="jud">
                        <div>{{ orderOne.city }} {{ orderOne.region }}{{ orderOne.house }}</div>
                        <div>{{ orderOne.contact }} {{ orderOne.phone }}</div>
                    </div>
                    <div class="current_address_info" v-else>暂无收货地址</div>
                    <div class="iconfont current_address_icon">&#xe697;</div>
                </div>
            </div>
        </div>
        <div class="order_confirmation_content">
            <CartCard/>
        </div>
        <div class="order_confirmation_footer">
            <div class="total_price">实付金额: <b>￥{{(newCartPrice).toFixed(2)}}</b></div>
            <div class="submit" v-if="!isShow" @click="clickOrder">提交订单</div>
        </div>
        <!-- 蒙层 -->
        <div class="mask" v-if="isShow">
            <div class="mask_content">
                <div class="mask_content_title">确认要离开收银台?</div>
                <div class="mask_content_desc">请尽快完成支付,否则将被取消</div>
                <div class="mask_content_btn">
                    <div class="btn cancel" @click="isShow = !isShow">取消订单</div>
                    <div class="btn confirm" @click="clickPay">确定支付</div>
                </div>
            </div>
        </div>
    </div>  
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.order_confirmation {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #eee;

    &_header {
        padding: .18rem;
        height: 1.6rem;
        background-image: linear-gradient(0deg, rgba(0, 145, 255, 0.00) 4%, #0091FF 50%);
        background-size: 100% 1.6rem;
        background-repeat: no-repeat;
        
        &_title {
            display: flex;
            color: $bgColor;
            
            .title_back {
                font-size: .22rem;
            }
            .title_text {
                flex: 1;
                text-align: center;
                font-size: .16rem;
            }
        }
        &_address {
            padding: .18rem;
            background-color: $bgColor;
            margin-top: .28rem;
            line-height: .22rem;
            font-size: .16rem;
            color: $content_fontcolor;
            border-radius: .04rem;
            .address_title {
                margin-bottom: .18rem;
            }
            .current_address {
                display: flex;
                justify-content: space-between;

                &_info {
                    div:last-child {
                        font-size: .12rem;
                    }
                }

                &_icon {
                    transform: rotate(180deg);
                    margin-right: .08rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }
            }
        }
    }

    &_content {
        width: 100%;
        position: absolute;
        top: 2rem;
        bottom: .5rem;
        box-sizing: border-box;
        overflow-y: scroll;
    }

    &_footer {
        height: .5rem;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: $bgColor;
        line-height: .5rem;
        display: flex;
        
        .total_price {
            flex: 1;
            padding-left: .18rem;
        }
        .submit {
            width: 1rem;
            height: .5rem;
            background-color: $btn-bgColor;
            color: $bgColor;
            text-align: center;
            font-size: .14rem;
        }
    }

    // 蒙层
    .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 999;
        background-color: rgba($color: #000000, $alpha: .5);
        display: flex;
        justify-content: center;
        align-items: center;

        &_content {
            width: 80%;
            padding: .24rem;
            box-sizing: border-box;
            background-color: $bgColor;
            border-radius: .04rem;
            text-align: center;

            &_title {
                font-size: .18rem;
                font-weight: bold;
                color: $content_fontcolor;
            }
            &_desc {
                margin: .12rem 0;
                line-height: .2rem;
                font-size: .14rem;
                color: $medium-fontColor;
            }
            &_btn {
                display: flex;
                justify-content: center;

                .btn {
                    width: .8rem;
                    height: .32rem;
                    border-radius: .24rem;
                    font-size: .14rem;
                    line-height: .32rem;
                }
                .cancel {
                    margin-right: .12rem;
                    border: solid .01rem $btn-bgColor;
                    color: $btn-bgColor;
                }
                .confirm {
                    background-color: $btn-bgColor;
                    color: $bgColor;
                }
            }
        }
    }
}

</style>